<template>
  <div class="content">
    <div class="top">
      <img class="gif" src="../../assets/logo.gif">
      <img class="logo" src="../../assets/pc_logo.png">
    </div>
    <div class="list">
      <div v-for="(item,index) in goodsList" :key="index" class="list-item">
        <div class="left">
          <div class="startAddress">{{ item.startCities }}</div>
          <div class="name">货物名称：<label>{{ item.goodsName }}</label></div>
          <div class="weight">重量：<label>{{ item.goodsWeight }}</label></div>
        </div>
        <div class="center">
          <label class="dis">{{ item.distance }}</label>
          <label class="link">----------</label>
        </div>
        <div class="right">
          <div class="endAddress">{{ item.endCities }}</div>
          <div class="info">
            <div class="carType" v-if="item.carRequireResults.length > 0">
              车型：<label>{{ item.carRequireResults[0].carTypeName }}</label>
            </div>
            <div class="carLength" v-if="item.carRequireResults.length > 1">
              车长：<label>{{ item.carRequireResults[1].carLength }}米</label>
            </div>
          </div>
          <div class="time">
            装货时间：<label>{{ item.time }}</label>
          </div>
        </div>
        <div class="scan">
          <div class="val">
            <div class="imgDiv">
              <!-- <vue-qr :text="item.url" /> -->
              <img src="../../assets/scan_logo.jpg">
            </div>
            <label>微信扫我查看联系方式</label>
          </div>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="getGoodsList"
      />
    </div>
    <div class="footer">
      <img src="../../assets/footer_banner.png">
    </div>
  </div>
</template>

<script>
import { goodList } from '@/api/goodList.js'
import Pagination from '@/components/Pagination'

export default {
  name: 'Hall',
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      goodsList: {},
      listQuery: {
        current: 1,
        size: 20
      }
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    getTime(timestamp) {
      var date = new Date(parseInt(timestamp))
      var Year = date.getFullYear()
      var Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      var Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())
      var Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
      var Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      var GMT = Year + '-' + Moth + '-' + Day + '   ' + Hour + ':' + Minute + ':' + Sechond
      return GMT
    },
    getGoodsList() {
      var start = (this.listQuery.current - 1) * 20
      var data = {
        'start': start,
        'pageSize': 20
      }
      goodList(data).then((response) => {
        console.log(response)
        this.goodsList = response.data
        this.total = response.pageData.total
        this.goodsList.forEach(r => {
          r.time = this.getTime(r.useCarStart)
        })
      })
    }
  }
}
</script>

<style lang="scss">
.content {
	background-color: rgb(245, 245, 245);

	.top {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFF;
		position: relative;
		.gif {
			width: 70%;
			height: 16%;
		}
		.logo{
			position: absolute;
			left: 15%;
			top: 6%;
			width: 310px;
			height: 40px;
		}
	}

	.list {
		background-color: #FFF;
		margin-left: 100px;
		margin-right: 100px;
		margin-top: 10px;
		border-radius: 5px;

		.list-item {
			padding-top: 30px;
			padding-bottom: 20px;
			padding-left: 100px;
			display: flex;

			.left {
				.startAddress {
					font-size: 18px;
					font-weight: bold;
				}

				.name {
					margin-top: 20px;
					font-size: 14px;
					color: #999999;

					label {
						color: #333333;
					}
				}

				.weight {
					margin-top: 15px;
					font-size: 14px;
					color: #999999;

					label {
						color: #333333;
					}
				}
			}

			.center {
				position: relative;
				width: 100px;
				display: flex;
				align-items: center;
				height: 15px;
				justify-content: center;

				.dis {
					position: absolute;
					font-size: 12px;
					text-align: center;
					align-items: center;
					color: #666666;
				}

				.link {
					margin-top: 15px;
					color: #666666;
				}
			}

			.right {
				.endAddress {
					font-size: 18px;
					font-weight: bold;
				}

				.info {
					display: flex;
					margin-top: 20px;
					font-size: 14px;

					.carType {
						color: #999999;

						label {
							color: #333333;
						}
					}

					.carLength {
						margin-left: 20px;
						color: #999999;

						label {
							color: #333333;
						}
					}
				}

				.time {
					margin-top: 15px;
					font-size: 14px;
					color: #999999;

					label {
						color: #333333;
					}
				}
			}

			.scan {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.val {
					position: absolute;
					right: 110px;
					display: grid;
					border: 1px solid #E5E5E5;
					border-radius: 2px;

					.imgDiv {
						display: flex;
						justify-content: center;
						align-items: center;

						img {
							width: 110px;
							height: 110px;
						}
					}

					label {
						font-size: 8px;
						color: #666666;
						padding-left: 2px;
						padding-bottom: 2px;
						padding-right: 2px;
						letter-spacing: 0;
					}
				}

			}
		}
	}
	.footer{
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFF;
		img{
			width: 70%;
			height: 14%;
		}
	}
	.pagination{
		display: flex;
		justify-content: flex-end;
		width: 98%;
		margin: 20px 0;
	}
	.pagination-container {
		margin-top: 30px;
	}
}
</style>
